<template>
	<view class="nav_box">
		<myNav :title="title" :height="65" :isBlack="true" />
	</view>
	<view class="face_box pdl-36 pdr-36 pdt-24">
		<view class="face_title flex-col">
			<view class="title fs42">人脸识别</view>
			<text class="desc mgt-19 fs22">信息仅用于借款，验证是否本人操作</text>
		</view>
		<view class="face_container mgt-87">
			<view class="flex-ac flex-col">
				<image class="face_img mgb-50" src="/static/src/authentication/face_img.png" mode="aspectFill"></image>
				<text class="face_text fs28">请正对手机进行人脸识别</text>
			</view>
		</view>
		<view class="face_bottom mgt-120">
			<u-checkbox-group size="30" class="mgt-28">
				<u-checkbox v-model="checked" shape="circle">
					<view class="agreement_wrap fs24">
						我已阅读并同意
						<text class="agreement" @click="toAgreeMent">《人脸识别服务用户授权书》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
			<u-button class="back_btn mgt-62 fs32" shape="circle" :hair-line="false" :ripple="true" throttle-time="2000"
				@click="handleBack">上一步</u-button>
			<u-button class="face_btn mgt-22" shape="circle" :ripple="true" type="primary" throttle-time="2000"
				@click="handleApply">开始人脸识别</u-button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { useInformation } from '@/store/modules/index.ts'

	import { ref } from 'vue';

	import myNav from "../../components/myNav.vue"

	const title = ref<string>("人脸识别")

	const checked = ref<boolean>(false)

	const handleBack = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
		uni.navigateBack({
			delta: 1
		});
	}

	const handleApply = async () => {
		uni.navigateBack({
			delta: 1,
			success: () => {
				uni.$emit('getIdentify', {identify: true})
			}
		})
	}
</script>
<style lang="scss" scoped>
	@import '@/style/style.scss';

	.face_box {
		.face_title {
			.title {
				color: #333333;
				font-weight: bold;
				font-family: PingFang SC;
			}

			.desc {
				color: #666666;
				font-weight: 500;
				font-family: PingFang SC;
			}
		}

		.face_container {
			.face_img {
				width: 419rpx;
				height: 419rpx;
			}

			.face_text {
				color: #333333;
				font-weight: 500;
				font-family: PingFang SC;
			}
		}

		.face_bottom {
			.agreement_wrap {
				font-family: PingFang SC;

				.agreement {
					color: #3C51F2;
				}
			}

			.face_btn {
				background: #3C51F2;
				height: 100rpx;
			}
		}
	}
</style>